<template>
  <!--	注 使用了$attrs 故可以使用文档内所有属性-->
  <!--  <div class="w-full">-->
  <n-select
    v-if="props.dictType === 'select'"
    v-bind="$attrs"
    label-field="name"
    value-field="val"
    :value="modelValue"
    :options="options"
    :disabled="disabled"
    :on-update:value="selectChangeHandler"
  ></n-select>
  <!--  </div>-->
  <n-radio-group
    v-if="props.dictType === 'radio'"
    v-bind="$attrs"
    :value="modelValue"
    @update:value="radioChangeHandler"
    :disabled="disabled"
    class="w-full"
  >
    <n-space item-style="display: flex;">
      <n-radio v-for="item in options" :disabled="item?.disabled" :key="item?.val" :value="item?.val">
        {{ item.name }}</n-radio>
    </n-space>
  </n-radio-group>
  <n-checkbox-group
    :disabled="disabled"
    @update:value="checkboxChangeHandler"
    :value="modelValue"
    v-if="props.dictType === 'checkbox'"
  >
    <n-space item-style="display: flex;">
      <n-checkbox v-for="item in options" :key="item?.val" :value="item?.val" :label="item?.name" />
    </n-space>
  </n-checkbox-group>
</template>

<script setup name="SysDict">
import { onBeforeUnmount, ref, watch } from 'vue';
import { DictStore } from '@/store/modules/dict.js';
// import { API_getDictValByCode } from '@/api/app/index.js';

const options = ref([]);

const props = defineProps({
  dictKey: {
    type: String,
    default: '',
    required: true,
  },
  dictType: {
    type: String,
    default: 'select',
  },
  modelValue: {
    type: undefined,
    default: '',
    required: true,
  },
  alwaysFromApi: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  disabledVal: {
    type: Array,
    default: () => [],
  },
});

const dictStore = DictStore();
const dictData = dictStore.dictData;

const stopWatch = watch(
  () => props.disabledVal,
  () => getDictData(),
  { immediate: true },
);
const emits = defineEmits(['update:modelValue', 'valueChange']);
//统一发送方法
const emitUpdateModelValue = (value = '') => {
  emits('update:modelValue', value);
  emits('valueChange', value);
};
async function fetchDict(dictKey = '') {
  // 字典接口
  // const res = await API_getDictValByCode({ code: dictKey });
  // dictStore.setDictData(dictKey, res);
  options.value = dictData[dictKey];
  options.value?.forEach((item) => {
    item.disabled = props.disabledVal?.includes(item?.val);
  });
}

function getDictData() {
  const dictKey = `${props.dictKey}`;
  if (dictData[dictKey]?.length && !props.alwaysFromApi) {
    options.value = dictData[dictKey];
    options.value?.forEach((item) => {
      item.disabled = props.disabledVal?.includes(item?.val);
    });
  } else {
    fetchDict(dictKey);
  }
}

getDictData();

// 拆分 各种类型的发送方法 方便后期扩展
const selectChangeHandler = (e) => {
  emitUpdateModelValue(e);
};

const radioChangeHandler = (e) => {
  emitUpdateModelValue(e);
};

const checkboxChangeHandler = (e) => {
  emitUpdateModelValue(e);
};

onBeforeUnmount(() => {
  stopWatch();
});
</script>

<style scoped></style>
